<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='res/jquery-2.2.4.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='res/jquery.qrcode.min.js' charset='utf-8'></script>
    <title>订单创建演示界面</title>
</head>
<body>
<div style="width: 375px; height: 600px; margin: 0 auto; padding-top: 30px; border: 1px solid #ccc; text-align: center;">
    <div  class="qrCodeBox">
        <div id="qrCodeBox" style="height: 260px; width: 260px; margin: 0 auto;">
        </div>
        <div id="orderNo" style="padding: 10px 0;">
        </div>
        <div id="msgBox" style="padding: 10px 0;">
        </div>
    </div>

    <div>
        订单金额: <input type="text" id="amount" value="1" /><br />
        下游商户号: <input type="text" id="merSubCode" value="8001001" /><br />
        创建模式: <input type="text" id="makeOrderType" value="0" /><br />
        环境: <input type="text" id="env" value="1" /><br />
        <button onclick="makeOrder()" style="height: 50px; width: 120px;">创建收款码</button>
        <button onclick="reload()" style="height: 50px; width: 120px; margin-left: 20px;">刷新</button>
    </div>


    <div>
        订单支付状态: <span id="orderStatus"></span>
    </div>
</div>
</body>
<script>

    // 订单号
    var orderNo;
    // 定时查询订单支付状态的定时器
    var querOrderStatusTimer;

    /**
     * 根据金额创建支付宝的收款码
     */
    function makeOrder() {

        $("#qrCodeBox").html("");
        $("#orderNo").html("");
        $("#msgBox").html("");

        var amount = $("#amount").val();

        $.ajax({
            url: "pay/makeOrder",
            type: "GET",
            data: {
                "amount": amount,
                "payChannelType": 0,
                "merSubCode": $("#merSubCode").val(),
                "makeOrderType": $("#makeOrderType").val(),
                "env": $("#env").val()
            },
            success: function(result) {
                $("#msgBox").html(result.msg);
                if (result.status === true) {
                    $("#orderNo").html("订单号:" + result.orderNo + "，金额:"+amount+"元");
                    // 生成二维码
                    $("#qrCodeBox").qrcode(result.qrCodeUrl);
                    // 记录订单号
                    orderNo = result.orderNo;
                    // 每5秒查询一次
                    querOrderStatusTimer = setInterval(function(){
                        queryOrderStatus();
                    }, 5 * 1000);
                }
            }
        });
    }

    /**
     * 查询订单支付状态
     */
    function queryOrderStatus() {
        $.ajax({
            url: "pay/queryOrderStatus",
            type: "GET",
            data: {
                "orderNo": orderNo
            },
            success: function(result) {
                $("#orderStatus").html(result.msg);
                if (result.code === '1015') {
                    // 生成二维码
                    $("#orderStatus").html("支付成功");
                    // 清除定时器
                    window.clearInterval(querOrderStatusTimer);
                }
            }
        });
    }

    function reload() {
        window.location.reload();
    }
</script>
</html>